<!DOCTYPE HTML>
<html>

<head>
	<link rel="bookmark"  type="image/x-icon"  href="/img/logo_miccall.png"/>
	<link rel="shortcut icon" href="/img/logo_miccall.png">
	
			    <title>
    Ame雨
    </title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
    <link rel="stylesheet" href="/amelin-ting/css/mic_main.css" />
    <link rel="stylesheet" href="/amelin-ting/css/dropdownMenu.css" />
    <meta name="keywords" content="Ame雨" />
    
    	<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
	 
    <noscript>
        <link rel="stylesheet" href="/amelin-ting/css/noscript.css" />
    </noscript>
    <style type="text/css">
        body:before {
          content: ' ';
          position: fixed;
          top: 0;
          background: url('/amelin-ting/img/bg.jpg') center 0 no-repeat;
          right: 0;
          bottom: 0;
          left: 0;
          background-size: cover; 
        }
    </style>

			    
  
    <script type="text/x-mathjax-config">
      MathJax.Hub.Config({
        tex2jax: {
          inlineMath: [ ['$','$'], ["\\(","\\)"]  ],
          processEscapes: true,
          skipTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code']
        }
      });
    </script>

    <script type="text/x-mathjax-config">
      MathJax.Hub.Queue(function() {
        var all = MathJax.Hub.getAllJax(), i;
        for (i=0; i < all.length; i += 1) {
          all[i].SourceElement().parentNode.className += ' has-jax';
        }
      });
    </script>
    <script async type="text/javascript" src="//cdn.bootcss.com/mathjax/2.7.1/latest.js?config=TeX-AMS-MML_HTMLorMML"></script>
  


    <script src="/amelin-ting/js/jquery.min.js"></script>
    <script src="/amelin-ting/js/jquery.scrollex.min.js"></script>
    <script src="/amelin-ting/js/jquery.scrolly.min.js"></script>
    <script src="/amelin-ting/js/skel.min.js"></script>
    <script src="/amelin-ting/js/util.js"></script>
    <script src="/amelin-ting/js/main.js"></script>
	
<meta name="generator" content="Hexo 5.4.0"></head>
    
		
<!-- Layouts -->



<!--  代码渲染  -->
<link rel="stylesheet" href="/css/prism_coy.css" />
<link rel="stylesheet" href="/css/typo.css" />
<!-- 文章页 -->
<body class="is-loading">
    <!-- Wrapper 外包 s-->
    <div id="wrapper" class="fade-in">
        <!-- Intro 头部显示 s -->
        <!-- Intro 头部显示 e -->
        <!-- Header 头部logo start -->
        <header id="header">
    <a href="/amelin-ting/" class="logo">Art Space</a>
</header>
        <!-- Nav 导航条 start -->
        <nav id="nav" class="special" >
            <ul class="menu links" >
			<!-- Homepage  主页  --> 
			<li >
	            <a href="/amelin-ting/" rel="nofollow">主页</a>
	        </li>
			<!-- categories_name  分类   --> 
	        
	        <li class="active">
	            <a href="#s1">分类</a>
	                    <ul class="submenu">
	                        <li>
	                        <a class="category-link" href="/amelin-ting/categories/Go/">Go</a></li><li><a class="category-link" href="/amelin-ting/categories/django/">django</a></li><li><a class="category-link" href="/amelin-ting/categories/drf/">drf</a></li><li><a class="category-link" href="/amelin-ting/categories/gin/">gin</a></li><li><a class="category-link" href="/amelin-ting/categories/go/">go</a></li><li><a class="category-link" href="/amelin-ting/categories/linux/">linux</a></li><li><a class="category-link" href="/amelin-ting/categories/mysql/">mysql</a></li><li><a class="category-link" href="/amelin-ting/categories/python/">python</a></li><li><a class="category-link" href="/amelin-ting/categories/%E5%86%85%E7%BD%91%E7%A9%BF%E9%80%8F/">内网穿透</a></li><li><a class="category-link" href="/amelin-ting/categories/%E5%89%8D%E7%AB%AF/">前端</a>
	                    </ul>
	        </li>
	        
	        <!-- archives  归档   --> 
	        
	        
		        <!-- Pages 自定义   -->
		        
		        <li>
		            <a href="/about/" title="简历">
		                简历
		            </a>
		        </li>
		        
		        <li>
		            <a href="/group/" title="团队">
		                团队
		            </a>
		        </li>
		        
		        <li>
		            <a href="/gallery/" title="图库">
		                图库
		            </a>
		        </li>
		        
		        <li>
		            <a href="/tag/" title="标签">
		                标签
		            </a>
		        </li>
		        


            </ul>
            <!-- icons 图标   -->
			<ul class="icons">
                    
                    <li>
                        <a title="github" href="https://github.com/miccall" target="_blank" rel="noopener">
                            <i class="icon fa fa-github"></i>
                        </a>
                    </li>
                    
                    <li>
                        <a title="500px" href="http://500px.com" target="_blank" rel="noopener">
                            <i class="icon fa fa-500px"></i>
                        </a>
                    </li>
                    
			</ul>
</nav>

        <div id="main" >
            <div class ="post_page_title_img" style="height: 25rem;background-image: url(https://img0.baidu.com/it/u=377673578,738145617&amp;fm=26&amp;fmt=auto);background-position: center; background-repeat:no-repeat; background-size:cover;-moz-background-size:cover;overflow:hidden;" >
                <a href="#" style="padding: 4rem 4rem 2rem 4rem ;"><h2 >djangoAjax</h2></a>
            </div>
            <!-- Post -->
            <div class="typo" style="padding: 3rem;">
                <h2 id="一、Ajax简介"><a href="#一、Ajax简介" class="headerlink" title="一、Ajax简介"></a>一、Ajax简介</h2><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line"><span class="string">&quot;&quot;&quot;</span></span><br><span class="line"><span class="string">异步提交</span></span><br><span class="line"><span class="string">局部刷新</span></span><br><span class="line"><span class="string">例子:github注册</span></span><br><span class="line"><span class="string">	动态获取用户名实时的跟后端确认并实时展示的前端(局部刷新)</span></span><br><span class="line"><span class="string">	</span></span><br><span class="line"><span class="string">朝发送请求的方式</span></span><br><span class="line"><span class="string">	1.浏览器地址栏直接输入url回车						   GET请求</span></span><br><span class="line"><span class="string">	2.a标签href属性											    GET请求</span></span><br><span class="line"><span class="string">	3.form表单														 GET请求/POST请求</span></span><br><span class="line"><span class="string">	4.ajax																GET请求/POST请求	</span></span><br><span class="line"><span class="string">	</span></span><br><span class="line"><span class="string">AJAX 不是新的编程语言，而是一种使用现有标准的新方法(比较装饰器)</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string">AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。（这一特点给用户的感受是在不知不觉中完成请求和响应过程）</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string">Ajax我们只学习jQuery封装之后的版本(不学原生的 原生的复杂并且在实际项目中也一般不用)</span></span><br><span class="line"><span class="string">所以我们在前端页面使用ajax的时候需要确保导入了jQuery</span></span><br><span class="line"><span class="string">ps:并不只有jQuery能够实现ajax，其他的框架也可以 但是换汤不换药 原理是一样的</span></span><br><span class="line"><span class="string">&quot;&quot;&quot;</span></span><br></pre></td></tr></table></figure>

<h2 id="二、Ajax基本语法"><a href="#二、Ajax基本语法" class="headerlink" title="二、Ajax基本语法"></a>二、Ajax基本语法</h2><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br></pre></td><td class="code"><pre><span class="line"><span class="string">&quot;&quot;&quot;</span></span><br><span class="line"><span class="string">页面上有三个input框</span></span><br><span class="line"><span class="string">	在前两个框中输入数字 点击按钮 朝后端发送ajax请求</span></span><br><span class="line"><span class="string">	后端计算出结果 再返回给前端动态展示的到第三个input框中</span></span><br><span class="line"><span class="string">	(整个过程页面不准有刷新,也不能在前端计算)</span></span><br><span class="line"><span class="string">&quot;&quot;&quot;</span></span><br><span class="line">$(<span class="string">&#x27;#btn&#x27;</span>).click(function () &#123;</span><br><span class="line">        // 朝后端发送ajax请求</span><br><span class="line">        $.ajax(&#123;</span><br><span class="line">            // <span class="number">1.</span>指定朝哪个后端发送ajax请求</span><br><span class="line">            url:<span class="string">&#x27;&#x27;</span>, // 不写就是朝当前地址提交</span><br><span class="line">            // <span class="number">2.</span>请求方式</span><br><span class="line">            <span class="built_in">type</span>:<span class="string">&#x27;post&#x27;</span>,  // 不指定默认就是get 都是小写</span><br><span class="line">            // <span class="number">3.</span>数据</span><br><span class="line">            &#123;<span class="comment">#data:&#123;&#x27;username&#x27;:&#x27;jason&#x27;,&#x27;password&#x27;:123&#125;,#&#125;</span></span><br><span class="line">            data:&#123;<span class="string">&#x27;i1&#x27;</span>:$(<span class="string">&#x27;#d1&#x27;</span>).val(),<span class="string">&#x27;i2&#x27;</span>:$(<span class="string">&#x27;#d2&#x27;</span>).val()&#125;,</span><br><span class="line">            // <span class="number">4.</span>回调函数:当后端给你返回结果的时候会自动触发 args接受后端的返回结果</span><br><span class="line">            success:function (args) &#123;</span><br><span class="line">                &#123;<span class="comment">#alert(args)  // 通过DOM操作动态渲染到第三个input里面#&#125;</span></span><br><span class="line">                &#123;<span class="comment">#$(&#x27;#d3&#x27;).val(args)#&#125;</span></span><br><span class="line">                console.log(typeof args)</span><br><span class="line"></span><br><span class="line">            &#125;</span><br><span class="line">        &#125;)</span><br><span class="line">    &#125;)</span><br><span class="line">              </span><br><span class="line">              </span><br><span class="line"><span class="string">&quot;&quot;&quot;</span></span><br><span class="line"><span class="string">针对后端如果是用HttpResponse返回的数据 回调函数不会自动帮你反序列化</span></span><br><span class="line"><span class="string">如果后端直接用的是JsonResponse返回的数据 回调函数会自动帮你反序列化</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string">HttpResponse解决方式</span></span><br><span class="line"><span class="string">	1.自己在前端利用JSON.parse()</span></span><br><span class="line"><span class="string">	2.在ajax里面配置一个参数</span></span><br><span class="line"><span class="string">			(后面再讲)</span></span><br><span class="line"><span class="string">&quot;&quot;&quot;</span></span><br></pre></td></tr></table></figure>

<h2 id="三、前后端传输数据编码格式"><a href="#三、前后端传输数据编码格式" class="headerlink" title="三、前后端传输数据编码格式"></a>三、前后端传输数据编码格式</h2><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># 我们主要研究post请求数据的编码格式</span></span><br><span class="line"><span class="string">&quot;&quot;&quot;</span></span><br><span class="line"><span class="string">get请求数据就是直接放在url后面的</span></span><br><span class="line"><span class="string">url?username=jason&amp;password=123</span></span><br><span class="line"><span class="string">&quot;&quot;&quot;</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># 可以朝后端发送post请求的方式</span></span><br><span class="line">	<span class="string">&quot;&quot;&quot;</span></span><br><span class="line"><span class="string">	1.form表单</span></span><br><span class="line"><span class="string">	2.ajax请求</span></span><br><span class="line"><span class="string">	&quot;&quot;&quot;</span></span><br><span class="line"></span><br><span class="line">  </span><br><span class="line"><span class="string">&quot;&quot;&quot;</span></span><br><span class="line"><span class="string">前后端传输数据的编码格式</span></span><br><span class="line"><span class="string">	urlencoded</span></span><br><span class="line"><span class="string">	</span></span><br><span class="line"><span class="string">	formdata</span></span><br><span class="line"><span class="string">	</span></span><br><span class="line"><span class="string">	json</span></span><br><span class="line"><span class="string">&quot;&quot;&quot;</span></span><br><span class="line"><span class="comment"># 研究form表单</span></span><br><span class="line">	默认的数据编码格式是urlencoded</span><br><span class="line">  数据格式:username=jason&amp;password=<span class="number">123</span></span><br><span class="line">  django后端针对符合urlencoded编码格式的数据都会自动帮你解析封装到request.POST中</span><br><span class="line">  	username=jason&amp;password=<span class="number">123</span>	&gt;&gt;&gt; request.POST</span><br><span class="line">  </span><br><span class="line">  如果你把编码格式改成formdata，那么针对普通的键值对还是解析到request.POST中而将文件解析到request.FILES中</span><br><span class="line">  </span><br><span class="line">  form表单是没有办法发送json格式数据的</span><br><span class="line"> </span><br><span class="line"></span><br><span class="line"><span class="comment"># 研究ajax</span></span><br><span class="line">	默认的编码格式也是urlencoded</span><br><span class="line">  数据格式:username=jason&amp;age=<span class="number">20</span></span><br><span class="line">	django后端针对符合urlencoded编码格式的数据都会自动帮你解析封装到request.POST中</span><br><span class="line">  	username=jason&amp;age=<span class="number">20</span>	&gt;&gt;&gt; request.POST</span><br></pre></td></tr></table></figure>

<h2 id="四、Ajax发送json格式数据"><a href="#四、Ajax发送json格式数据" class="headerlink" title="四、Ajax发送json格式数据"></a>四、Ajax发送json格式数据</h2><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br></pre></td><td class="code"><pre><span class="line"><span class="string">&quot;&quot;&quot;</span></span><br><span class="line"><span class="string">前后端传输数据的时候一定要确保编码格式跟数据真正的格式是一致的</span></span><br><span class="line"><span class="string">不要骗人家!!!</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string">&#123;&quot;username&quot;:&quot;jason&quot;,&quot;age&quot;:25&#125;  </span></span><br><span class="line"><span class="string">	在request.POST里面肯定找不到</span></span><br><span class="line"><span class="string">	</span></span><br><span class="line"><span class="string">	django针对json格式的数据 不会做任何的处理 </span></span><br><span class="line"><span class="string">	</span></span><br><span class="line"><span class="string">request对象方法补充</span></span><br><span class="line"><span class="string">	request.is_ajax()</span></span><br><span class="line"><span class="string">		判断当前请求是否是ajax请求 返回布尔值</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string">&quot;&quot;&quot;</span></span><br><span class="line"></span><br><span class="line">&lt;script&gt;</span><br><span class="line">    $(<span class="string">&#x27;#d1&#x27;</span>).click(function () &#123;</span><br><span class="line">        $.ajax(&#123;</span><br><span class="line">            url:<span class="string">&#x27;&#x27;</span>,</span><br><span class="line">            <span class="built_in">type</span>:<span class="string">&#x27;post&#x27;</span>,</span><br><span class="line">            data:JSON.stringify(&#123;<span class="string">&#x27;username&#x27;</span>:<span class="string">&#x27;jason&#x27;</span>,<span class="string">&#x27;age&#x27;</span>:<span class="number">25</span>&#125;),</span><br><span class="line">            contentType:<span class="string">&#x27;application/json&#x27;</span>,  // 指定编码格式</span><br><span class="line">            success:function () &#123;</span><br><span class="line"></span><br><span class="line">            &#125;</span><br><span class="line">        &#125;)</span><br><span class="line">    &#125;)</span><br><span class="line">&lt;/script&gt;</span><br><span class="line"></span><br><span class="line">        json_bytes = request.body</span><br><span class="line">        json_str = json_bytes.decode(<span class="string">&#x27;utf-8&#x27;</span>)</span><br><span class="line">        json_dict = json.loads(json_str)</span><br><span class="line"></span><br><span class="line">        <span class="comment"># json.loads括号内如果传入了一个二进制格式的数据那么内部自动解码再反序列化</span></span><br><span class="line">        json_dict = json.loads(json_bytes)</span><br><span class="line">        </span><br><span class="line"><span class="string">&quot;&quot;&quot;</span></span><br><span class="line"><span class="string">ajax发送json格式数据需要注意点</span></span><br><span class="line"><span class="string">	1.contentType参数指定成:application/json</span></span><br><span class="line"><span class="string">	2.数据是真正的json格式数据</span></span><br><span class="line"><span class="string">	3.django后端不会帮你处理json格式数据需要你自己去request.body获取并处理</span></span><br><span class="line"><span class="string">&quot;&quot;&quot;</span></span><br></pre></td></tr></table></figure>

<h2 id="五、Ajax发送文件"><a href="#五、Ajax发送文件" class="headerlink" title="五、Ajax发送文件"></a>五、Ajax发送文件</h2><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br></pre></td><td class="code"><pre><span class="line"><span class="string">&quot;&quot;&quot;</span></span><br><span class="line"><span class="string">ajax发送文件需要借助于js内置对象FormData</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string">&quot;&quot;&quot;</span></span><br><span class="line">&lt;script&gt;</span><br><span class="line">    // 点击按钮朝后端发送普通键值对和文件数据</span><br><span class="line">    $(<span class="string">&#x27;#d4&#x27;</span>).on(<span class="string">&#x27;click&#x27;</span>,function () &#123;</span><br><span class="line">        // <span class="number">1</span> 需要先利用FormData内置对象</span><br><span class="line">        let formDateObj = new FormData();</span><br><span class="line">        // <span class="number">2</span> 添加普通的键值对</span><br><span class="line">        formDateObj.append(<span class="string">&#x27;username&#x27;</span>,$(<span class="string">&#x27;#d1&#x27;</span>).val());</span><br><span class="line">        formDateObj.append(<span class="string">&#x27;password&#x27;</span>,$(<span class="string">&#x27;#d2&#x27;</span>).val());</span><br><span class="line">        // <span class="number">3</span> 添加文件对象</span><br><span class="line">        formDateObj.append(<span class="string">&#x27;myfile&#x27;</span>,$(<span class="string">&#x27;#d3&#x27;</span>)[<span class="number">0</span>].files[<span class="number">0</span>])</span><br><span class="line">        // <span class="number">4</span> 将对象基于ajax发送给后端</span><br><span class="line">        $.ajax(&#123;</span><br><span class="line">            url:<span class="string">&#x27;&#x27;</span>,</span><br><span class="line">            <span class="built_in">type</span>:<span class="string">&#x27;post&#x27;</span>,</span><br><span class="line">            data:formDateObj,  // 直接将对象放在data后面即可</span><br><span class="line"></span><br><span class="line">            // ajax发送文件必须要指定的两个参数</span><br><span class="line">            contentType:false,  // 不需使用任何编码 django后端能够自动识别formdata对象</span><br><span class="line">            processData:false,  // 告诉你的浏览器不要对你的数据进行任何处理</span><br><span class="line"></span><br><span class="line">            success:function (args) &#123;</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;)</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">    &#125;)</span><br><span class="line">&lt;/script&gt;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">def</span> <span class="title">ab_file</span>(<span class="params">request</span>):</span></span><br><span class="line">    <span class="keyword">if</span> request.is_ajax():</span><br><span class="line">        <span class="keyword">if</span> request.method == <span class="string">&#x27;POST&#x27;</span>:</span><br><span class="line">            <span class="built_in">print</span>(request.POST)</span><br><span class="line">            <span class="built_in">print</span>(request.FILES)</span><br><span class="line">    <span class="keyword">return</span> render(request,<span class="string">&#x27;ab_file.html&#x27;</span>)</span><br><span class="line">  </span><br><span class="line"><span class="string">&quot;&quot;&quot;</span></span><br><span class="line"><span class="string">总结:</span></span><br><span class="line"><span class="string">	1.需要利用内置对象FormData</span></span><br><span class="line"><span class="string">				// 2 添加普通的键值对</span></span><br><span class="line"><span class="string">        formDateObj.append(&#x27;username&#x27;,$(&#x27;#d1&#x27;).val());</span></span><br><span class="line"><span class="string">        formDateObj.append(&#x27;password&#x27;,$(&#x27;#d2&#x27;).val());</span></span><br><span class="line"><span class="string">        // 3 添加文件对象</span></span><br><span class="line"><span class="string">        formDateObj.append(&#x27;myfile&#x27;,$(&#x27;#d3&#x27;)[0].files[0])</span></span><br><span class="line"><span class="string">	2.需要指定两个关键性的参数</span></span><br><span class="line"><span class="string">				contentType:false,  // 不需使用任何编码 django后端能够自动识别formdata对象</span></span><br><span class="line"><span class="string">        processData:false,  // 告诉你的浏览器不要对你的数据进行任何处理</span></span><br><span class="line"><span class="string">	3.django后端能够直接识别到formdata对象并且能够将内部的普通键值自动解析并封装到request.POST中 文件数据自动解析并封装到request.FILES中</span></span><br><span class="line"><span class="string">&quot;&quot;&quot;</span></span><br></pre></td></tr></table></figure>

<h2 id="六、Django自带的序列化组件"><a href="#六、Django自带的序列化组件" class="headerlink" title="六、Django自带的序列化组件"></a>六、Django自带的序列化组件</h2><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br></pre></td><td class="code"><pre><span class="line"><span class="string">&quot;&quot;&quot;</span></span><br><span class="line"><span class="string">如果发现你可以直接使用MySQL但是无法使用sqlite3</span></span><br><span class="line"><span class="string">不要慌张不要恐惧 你只需要按照之前MySQL的操作将sqlite3的驱动装一下即可</span></span><br><span class="line"><span class="string">&quot;&quot;&quot;</span></span><br><span class="line"><span class="comment"># 需求:在前端给我获取到后端用户表里面所有的数据 并且要是列表套字典</span></span><br><span class="line"><span class="keyword">import</span> json</span><br><span class="line"><span class="keyword">from</span> django.http <span class="keyword">import</span> JsonResponse</span><br><span class="line"><span class="keyword">from</span> django.core <span class="keyword">import</span> serializers</span><br><span class="line"><span class="function"><span class="keyword">def</span> <span class="title">ab_ser</span>(<span class="params">request</span>):</span></span><br><span class="line">    user_queryset = models.User.objects.<span class="built_in">all</span>()</span><br><span class="line">    [&#123;&#125;,&#123;&#125;,&#123;&#125;,&#123;&#125;,&#123;&#125;]</span><br><span class="line">    user_list = []</span><br><span class="line">    <span class="keyword">for</span> user_obj <span class="keyword">in</span> user_queryset:</span><br><span class="line">        tmp = &#123;</span><br><span class="line">            <span class="string">&#x27;pk&#x27;</span>:user_obj.pk,</span><br><span class="line">            <span class="string">&#x27;username&#x27;</span>:user_obj.username,</span><br><span class="line">            <span class="string">&#x27;age&#x27;</span>:user_obj.age,</span><br><span class="line">            <span class="string">&#x27;gender&#x27;</span>:user_obj.get_gender_display()</span><br><span class="line">        &#125;</span><br><span class="line">        user_list.append(tmp)</span><br><span class="line">    <span class="keyword">return</span> JsonResponse(user_list,safe=<span class="literal">False</span>)</span><br><span class="line">    <span class="keyword">return</span> render(request,<span class="string">&#x27;ab_ser.html&#x27;</span>,<span class="built_in">locals</span>())</span><br><span class="line"></span><br><span class="line">    <span class="comment"># 序列化</span></span><br><span class="line">    res = serializers.serialize(<span class="string">&#x27;json&#x27;</span>,user_queryset)</span><br><span class="line">    <span class="string">&quot;&quot;&quot;会自动帮你将数据变成json格式的字符串 并且内部非常的全面&quot;&quot;&quot;</span></span><br><span class="line">    <span class="keyword">return</span> HttpResponse(res)</span><br><span class="line"><span class="string">&quot;&quot;&quot;</span></span><br><span class="line"><span class="string">[</span></span><br><span class="line"><span class="string"> &#123;&quot;pk&quot;: 1, &quot;username&quot;: &quot;jason&quot;, &quot;age&quot;: 25, &quot;gender&quot;: &quot;male&quot;&#125;, </span></span><br><span class="line"><span class="string"> &#123;&quot;pk&quot;: 2, &quot;username&quot;: &quot;egon&quot;, &quot;age&quot;: 31, &quot;gender&quot;: &quot;female&quot;&#125;,</span></span><br><span class="line"><span class="string"> &#123;&quot;pk&quot;: 3, &quot;username&quot;: &quot;kevin&quot;, &quot;age&quot;: 32, &quot;gender&quot;: &quot;others&quot;&#125;, </span></span><br><span class="line"><span class="string"> &#123;&quot;pk&quot;: 4, &quot;username&quot;: &quot;tank&quot;, &quot;age&quot;: 40, &quot;gender&quot;: 4&#125;</span></span><br><span class="line"><span class="string"> ]</span></span><br><span class="line"><span class="string">前后端分离的项目</span></span><br><span class="line"><span class="string">    作为后端开发的你只需要写代码将数据处理好</span></span><br><span class="line"><span class="string">    能够序列化返回给前端即可 </span></span><br><span class="line"><span class="string">        再写一个接口文档 告诉前端每个字段代表的意思即可</span></span><br><span class="line"><span class="string">        </span></span><br><span class="line"><span class="string">        </span></span><br><span class="line"><span class="string">[</span></span><br><span class="line"><span class="string">&#123;   &quot;model&quot;: &quot;app01.user&quot;, </span></span><br><span class="line"><span class="string">    &quot;pk&quot;: 1, </span></span><br><span class="line"><span class="string">    &quot;fields&quot;: &#123;&quot;username&quot;: &quot;jason&quot;, &quot;age&quot;: 25, &quot;gender&quot;: 1&#125;&#125;, </span></span><br><span class="line"><span class="string">    </span></span><br><span class="line"><span class="string">&#123;   &quot;model&quot;: &quot;app01.user&quot;, </span></span><br><span class="line"><span class="string">    &quot;pk&quot;: 2, </span></span><br><span class="line"><span class="string">    &quot;fields&quot;: &#123;&quot;username&quot;: &quot;egon&quot;, &quot;age&quot;: 31, &quot;gender&quot;: 2&#125;&#125;, </span></span><br><span class="line"><span class="string">    </span></span><br><span class="line"><span class="string">&#123;   &quot;model&quot;: &quot;app01.user&quot;, </span></span><br><span class="line"><span class="string">    &quot;pk&quot;: 3, </span></span><br><span class="line"><span class="string">    &quot;fields&quot;: &#123;&quot;username&quot;: &quot;kevin&quot;, &quot;age&quot;: 32, &quot;gender&quot;: 3&#125;&#125;,</span></span><br><span class="line"><span class="string">     </span></span><br><span class="line"><span class="string">&#123;   &quot;model&quot;: &quot;app01.user&quot;, </span></span><br><span class="line"><span class="string">    &quot;pk&quot;: 4, </span></span><br><span class="line"><span class="string">    &quot;fields&quot;: &#123;&quot;username&quot;: &quot;tank&quot;, &quot;age&quot;: 40, &quot;gender&quot;: 4&#125;&#125;</span></span><br><span class="line"><span class="string">]</span></span><br><span class="line"><span class="string">写接口就是利用序列化组件渲染数据然后写一个接口文档 该交代交代一下就完事</span></span><br><span class="line"><span class="string">&quot;&quot;&quot;</span></span><br></pre></td></tr></table></figure>

<h2 id="七、Django结合sweetalert实现二次操作"><a href="#七、Django结合sweetalert实现二次操作" class="headerlink" title="七、Django结合sweetalert实现二次操作"></a>七、Django结合sweetalert实现二次操作</h2><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line">```</span><br><span class="line"></span><br><span class="line"><span class="comment">## 八、批量插入数据</span></span><br><span class="line"></span><br><span class="line">```python</span><br><span class="line"><span class="comment"># views</span></span><br><span class="line">    <span class="comment"># 先给Book插入1000条数据  第一种方法</span></span><br><span class="line">    <span class="keyword">for</span> i <span class="keyword">in</span> <span class="built_in">range</span>(<span class="number">1000</span>)</span><br><span class="line">         models.Book.objects.create(title=<span class="string">&#x27;第%s本书&#x27;</span>%i)</span><br><span class="line">    	book_queryset = models.Book.objects.<span class="built_in">all</span>()</span><br><span class="line">    </span><br><span class="line">    <span class="comment"># 第二种方法</span></span><br><span class="line">    book_list = []</span><br><span class="line">    <span class="keyword">for</span> i <span class="keyword">in</span> <span class="built_in">range</span>(<span class="number">1000</span>)</span><br><span class="line">    	book_obj = models.Book(title=<span class="string">&#x27;第%s本书&#x27;</span>%i)</span><br><span class="line">        book_list.append(book_obj)</span><br><span class="line">    models.Book.objects.bulk_create(book_list)</span><br><span class="line">    </span><br><span class="line">    <span class="keyword">return</span> render(request, <span class="string">&#x27;insert.html&#x27;</span>, local())</span><br><span class="line"><span class="string">&quot;&quot;&quot;</span></span><br><span class="line"><span class="string">第一种方法其实是可行的，但是打开页面要载入很长时间</span></span><br><span class="line"><span class="string">第二种方法就更为便捷，打开页面载入时间很短，所以就要用第二种方法</span></span><br><span class="line"><span class="string">&quot;&quot;&quot;</span></span><br></pre></td></tr></table></figure>

<h2 id="九、自定义的分页器拷贝及使用"><a href="#九、自定义的分页器拷贝及使用" class="headerlink" title="九、自定义的分页器拷贝及使用"></a>九、自定义的分页器拷贝及使用</h2><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br></pre></td><td class="code"><pre><span class="line"><span class="string">&quot;&quot;&quot;</span></span><br><span class="line"><span class="string">当我们需要使用到非django内置的第三方功能或者组件代码的时候</span></span><br><span class="line"><span class="string">我们一般情况下会创建一个名为utils文件夹 在该文件夹内对模块进行功能性划分</span></span><br><span class="line"><span class="string">	utils可以在每个应用下创建 具体结合实际情况</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string">我们到了后期封装代码的时候 不再局限于函数</span></span><br><span class="line"><span class="string">还是尽量朝面向对象去封装</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string">我们自定义的分页器是基于bootstrap样式来的 所以你需要提前导入bootstrap</span></span><br><span class="line"><span class="string">	bootstrap 版本 v3</span></span><br><span class="line"><span class="string">	jQuery		版本 v3</span></span><br><span class="line"><span class="string">&quot;&quot;&quot;</span></span><br><span class="line"><span class="comment"># 后端</span></span><br><span class="line">book_queryset = models.Book.objects.<span class="built_in">all</span>()</span><br><span class="line">current_page = request.GET.get(<span class="string">&#x27;page&#x27;</span>,<span class="number">1</span>)</span><br><span class="line">all_count = book_queryset.count()</span><br><span class="line"><span class="comment"># 1 传值生成对象</span></span><br><span class="line">page_obj = Pagination(current_page=current_page,all_count=all_count)</span><br><span class="line"><span class="comment"># 2 直接对总数据进行切片操作</span></span><br><span class="line">page_queryset = book_queryset[page_obj.start:page_obj.end]</span><br><span class="line"><span class="comment"># 3 将page_queryset传递到页面 替换之前的book_queryset</span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment"># 前端</span></span><br><span class="line">&#123;% <span class="keyword">for</span> book_obj <span class="keyword">in</span> page_queryset %&#125;</span><br><span class="line">    &lt;p&gt;&#123;&#123; book_obj.title &#125;&#125;&lt;/p&gt;</span><br><span class="line">    &lt;nav aria-label=<span class="string">&quot;Page navigation&quot;</span>&gt;</span><br><span class="line">&lt;/nav&gt;</span><br><span class="line">&#123;% endfor %&#125;</span><br><span class="line">&#123;<span class="comment">#利用自定义分页器直接显示分页器样式#&#125;</span></span><br><span class="line">&#123;&#123; page_obj.page_html|safe &#125;&#125;</span><br><span class="line">  </span><br><span class="line"><span class="string">&quot;&quot;&quot;</span></span><br><span class="line"><span class="string">你们只需要掌握如何拷贝使用 以及大致的推导思路即可</span></span><br><span class="line"><span class="string">&quot;&quot;&quot;</span></span><br></pre></td></tr></table></figure>




            </div>

            <!-- Post Comments -->
            
    <!-- 使用 DISQUS_CLICK -->
<div id="disqus-comment">
    <div id="disqus_thread"></div>

<!-- add animation -->
<style>
	.disqus_click_btn {
            line-height: 30px;
            margin: 0;
            min-width: 50px;
            padding: 0 14px;
            display: inline-block;
            font-family: "Roboto", "Helvetica", "Arial", sans-serif;
            font-size: 14px;
            font-weight: 400;
            text-transform: uppercase;
            letter-spacing: 0;
            overflow: hidden;
            will-change: box-shadow;
            transition: box-shadow .2s cubic-bezier(.4, 0, 1, 1), background-color .2s cubic-bezier(.4, 0, .2, 1), color .2s cubic-bezier(.4, 0, .2, 1);
            outline: 0;
            cursor: pointer;
            text-decoration: none;
            text-align: center;
            vertical-align: middle;
            border: 0;
            background: rgba(158, 158, 158, .2);
            box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12);
            color: #fff;
            background-color: #7EC0EE;
            text-shadow: 0
        }
</style>
	
<div class="btn_click_load" id="disqus_bt"> 
    <button class="disqus_click_btn">点击查看评论</button>
</div>

<!--
<script type="text/javascript">
$('.btn_click_load').click(function() {
    /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
    var disqus_shortname = 'http-miccall-tech'; // required: replace example with your forum shortname

    /* * * DON'T EDIT BELOW THIS LINE * * */
    (function() {
      var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
      dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
      (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
    })();

    document.getElementById('disqus_bt').style.display = "none";
});
</script>
-->
<script type="text/javascript">
    var disqus_config = function () {
        this.page.url = 'https://gitee.com/AmeX/amelin-ting.git/2018/05/07/Django------Ajax/';  // Replace PAGE_URL with your page's canonical URL variable
        this.page.identifier = 'https://gitee.com/AmeX/amelin-ting.git/2018/05/07/Django------Ajax/'; // Replace PAGE_IDENTIFIER with your page's unique identifier variable
    };
</script>

<script type="text/javascript">
    $('.btn_click_load').click(function() {  //click to load comments
        (function() { // DON'T EDIT BELOW THIS LINE
            var d = document;
            var s = d.createElement('script');
            s.src = '//http-miccall-tech.disqus.com/embed.js';
            s.setAttribute('data-timestamp', + new Date());
            (d.head || d.body).appendChild(s);
        })();
        $('.btn_click_load').css('display','none');
    });
</script>
</div>
<style>
    #disqus-comment{
        background-color: #eee;
        padding: 2pc;
    }
</style>


        </div>
        <!-- Copyright 版权 start -->
                <div id="copyright">
            <ul>
                <li>&copy;Powered By <a target="_blank" rel="noopener" href="https://hexo.io/zh-cn/" style="border-bottom: none;">hexo</a></li>
                <li>Design: <a target="_blank" rel="noopener" href="http://miccall.tech " style="border-bottom: none;">miccall</a></li>
            </ul>
            
                <span id="busuanzi_container_site_pv">本站总访问量<span id="busuanzi_value_site_pv"></span>次</span>
			
        </div>
    </div>
</body>



 	
</html>
